import Index from "./views/index";
import PropTypesDemo from "./views/PropTypesDemo";
import ChildrenDemo from "./views/ChildrenDemo";
import StateDemo from "./views/StateDemo";
import Calculator from "./views/Calculator";
import LifecycleDemo from "./views/LifecycleDemo";
import UseStateDemo from "./views/UseStateDemo";
import Room from "./views/Room";
import RandomList from "./views/RandomList";
import AudioControls from "./views/AudioControls";
import AudioControls2 from "./views/AudioControls2";
import VideoComponent from "./views/VideoComponent";
import UseEffectDemo from "./views/UseEffectDemo";
import EyeDemo from "./components/Eye/EyeDemo";
import { Switch } from "react-router";
import { NavLink, Route } from "react-router-dom";
import styles from "./App.module.scss";
import Homework1123 from "./views/Homework1123";
import ContextDemo from "./views/ContextDemo";
import ChangeContextDome from "./views/ChangeContextDemo";
import MultiContext from "./views/MultiContext";
import PortalDemo from "./views/PortalDemo";
import PortalBubbleDemo from "./views/PortalBubbleDemo";
// import NotFound from "./views/NotFound";
import NestDemo from "./views/NestDemo";
const routesConfig = [
	{
		path: "/",
		component: Index,
		label: "首页",
	},
	{
		path: "/prop-types-demo",
		component: PropTypesDemo,
	},
	{
		path: "/children-demo",
		component: ChildrenDemo,
	},
	{
		path: "/state-demo",
		component: StateDemo,
	},
	{
		path: "/calc-demo",
		component: Calculator,
		label: "计算器",
	},
	{
		path: "/life-cycle-demo",
		component: LifecycleDemo,
	},
	{
		path: "/use-state-demo",
		component: UseStateDemo,
	},
	{
		path: "/room",
		component: Room,
	},
	{
		path: "/random-list",
		component: RandomList,
	},
	{
		path: "/audioControls",
		component: AudioControls,
	},
	{
		path: "/audioControls2",
		component: AudioControls2,
	},
	{
		path: "/video-component",
		component: VideoComponent,
	},
	{
		path: "/useEffect-demo",
		component: UseEffectDemo,
	},
	{
		path: "/eye-demo",
		component: EyeDemo,
	},
	{
		path: "/home-work",
		component: Homework1123,
	},
	{
		path: "/context-demo",
		component: ContextDemo,
	},
	{
		path: "/change-context-demo",
		component: ChangeContextDome,
	},
	{
		path: "/multi-context",
		component: MultiContext,
	},
	{
		path: "/portal-demo",
		component: PortalDemo,
	},
	{
		path: "/portal-bubble-demo",
		component: PortalBubbleDemo,
	},
	{
		path: "/nest-demo",
		component: NestDemo,
	},
];
export const routes = (
	<Switch>
		{routesConfig.map((config, index) => {
			return <Route exact key={index} {...config} />;
		})}
	</Switch>
);
export const links = (
	<ul>
		{routesConfig.map(({ path, component, label }, index) => {
			return (
				<li>
					<NavLink
						exact
						key={index}
						to={path}
						className={(isActive) =>
							styles.navLink + (isActive ? `${styles.selected}` : "")
						}>
						{label || component.name}
					</NavLink>
				</li>
			);
		})}
	</ul>
);
